<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>笛卡尔心形公式</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
            body{
                min-height: 100vh;
                overflow: hidden;
            }
		</style>
	</head>
	<body>
		<canvas></canvas>
		<script>
			const can = document.querySelector("canvas");
			can.width = window.innerWidth;
			can.height = window.innerHeight;
			const ctx = can.getContext("2d");

			ctx.beginPath();
			ctx.rotate(Math.PI);
			let start = 0;
			for (let i = 0; i < 1000; i++) {
				start += (Math.PI * 2) / 1000;
				let end = start + (Math.PI * 2) / 1000;
				let r = 100 * (1 - Math.sin(start));
				ctx.arc(-can.width / 2, -can.height / 3, r, start, end, false);
			}

			ctx.fillStyle = "#ffacca";
			ctx.fill();
		</script>
	</body>
</html>
